<template>
  <div>
    <el-drawer
      :title="'安排补考'"
      :before-close="goBack"
      :visible.sync="visible"
      :wrapperClosable="false"
      ref="drawer"
      size="600px"
      class="demo-drawer"
      :append-to-body="true"
      :modal-append-to-body="false"
    >
      <div class="demo-drawer__content" style="overflow: auto">
        <el-form
          ref="elForm"
          :model="dataForm"
          :rules="rules"
          size="small"
          label-width="100px"
        >
          <template v-if="!loading">
            <el-form-item label="主考名称" prop="mainName">
              <el-input
                :readonly="true"
                v-model="dataForm.mainName"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="试卷名称" prop="examPaperId">
              <popupSelect
                :disabled="true"
                v-model="dataForm.examPaperId"
                customUrlPostType="POST"
                data-type="customUrl"
                interfaceUrl="api/exam/paper/Selector"
                placeholder="请选择"
                clearable
                field="examPaperId"
                interfaceId="api/exam/paper/Select/"
                :columnOptions="examPaperIdcolumnOptions"
                propsValue="id"
                relationField="fullName"
                popupType="dialog"
                popupTitle="选择数据"
                popupWidth="800px"
                hasPage
                :pageSize="20"
              >
              </popupSelect>
            </el-form-item>
            <el-form-item label="补考名称" prop="fullName">
              <el-input
                v-model="dataForm.fullName"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="考试时间" prop="startDatetimeTemp">
              <el-date-picker
                v-model="dataForm.startDatetimeTemp"
                type="datetimerange"
                value-format="timestamp"
                format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                :default-time="['08:00:00', '24:00:00']"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="考试时长" prop="examLength">
              <el-input-number
                v-model="dataForm.examLength"
                placeholder="数字文本"
                :max="120"
                :step="1"
                controls-position="right"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item label="及格线" prop="passLine">
              <el-input-number
                v-model="dataForm.passLine"
                placeholder="数字文本"
                :min="1"
                :max="100"
                :step="1"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item label="补考次数" prop="examRepeatType">
              <el-radio-group v-model="dataForm.examRepeatType" size="small">
                <el-radio
                  v-for="(item, index) in examRepeatTypeOptions"
                  :key="index"
                  :label="item.id"
                  :disabled="item.disabled"
                >
                  {{ item.fullName }}
                </el-radio>
              </el-radio-group>
              <el-input-number
                v-if="dataForm.examRepeatType == 'custom'"
                v-model="dataForm.examRepeatNum"
                placeholder="数字文本"
                :step="1"
                controls-position="right"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item label="可见范围" prop="scopeType">
              <el-radio-group v-model="dataForm.scopeType" size="small">
                <el-radio
                  v-for="(item, index) in examScopeOptions"
                  :key="index"
                  :label="item.id"
                  :disabled="item.disabled"
                >
                  {{ item.fullName }}
                </el-radio>
              </el-radio-group>
              <userSelect
                v-if="dataForm.scopeType == '1'"
                width="500px"
                v-model="dataForm.scopeUsers"
              ></userSelect>
            </el-form-item>
          </template>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="goBack">取 消</el-button>
          <el-button type="primary" @click="dataFormSubmit">发 布</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  getInfo,
  createMakeupExam,
  updateMakeupExam,
} from "@/views/exam/api/manager";

export default {
  components: {},
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      btnLoading: false,
      dataForm: {
        mainName: "",
        fullName: "",
        examPaperId: "",
        startDatetime: undefined,
        endDatetime: undefined,
        startDatetimeTemp: [],
        examLength: 30,
        passLine: 60,
        examRepeatType: "before",
        examRepeatNum: 1,
        scopeType: "0",
        scopeUsers: [],
      },
      rules: {
        fullName: [
          {
            required: true,
            message: "请输入补考名称",
            trigger: "blur",
          },
        ],
        examPaperId: [
          {
            required: true,
            message: "请选择试卷",
            trigger: "change",
          },
        ],
        startDatetimeTemp: [
          {
            required: true,
            message: "请选择限制考试日期区间",
            trigger: "change",
          },
        ],
        examLength: [
          {
            required: true,
            message: "请至少选择一个",
            trigger: ["blur", "change"],
          },
        ],
        passLine: [
          {
            required: true,
            message: "请至少选择一个",
            trigger: ["blur", "change"],
          },
        ],
      },
      examPaperIdcolumnOptions: [
        {
          label: "名称",
          value: "fullName",
        },
        {
          label: "创建人",
          value: "creatorUserId",
        },
        {
          label: "创建时间",
          value: "creatorTime",
        },
      ],
      examRepeatTypeOptions: [
        { fullName: "不限次数", id: "before" },
        { fullName: "自定义", id: "custom" },
      ],
      examScopeOptions: [
        { fullName: "未参考，不通过的学员自动生成补考", id: "0" },
        { fullName: "指定补考人员", id: "1" },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goBack() {
      this.visible = false;
      this.$emit("refresh");
    },
    clearData(data) {
      for (let key in data) {
        if (data[key] instanceof Array) {
          data[key] = [];
        } else if (data[key] instanceof Object) {
          this.clearData(data[key]);
        } else {
          data[key] = "";
        }
      }
    },
    init(id, mainExam) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true;
          getInfo(this.dataForm.id).then((res) => {
            this.dataInfo(res.data);
            this.dataForm.mainName = mainExam.fullName;
            this.dataForm.examPaperId = mainExam.examPaperId;
            this.loading = false;
          });
        } else {
          this.clearData(this.dataForm);
          this.dataForm.mainName = mainExam.fullName;
          this.dataForm.examPaperId = mainExam.examPaperId;
          this.dataForm.parentId = mainExam.id;
          this.dataForm.fullName = "【补考】" + mainExam.fullName;
          this.dataForm.examLength = mainExam.examLength;
          this.dataForm.passLine = mainExam.passLine;
          this.dataForm.examRepeatType = "before";
          this.dataForm.scopeType = "0";
        }
      });
      this.$store.commit("generator/UPDATE_RELATION_DATA", {});
    },
    dataFormSave() {
      var _data = this.dataList();
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          const formMethod = this.dataForm.id
            ? updateMakeupExam
            : createMakeupExam;
          formMethod(_data)
            .then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.visible = false;
                  this.btnLoading = false;
                  this.$emit("refresh", true);
                },
              });
            })
            .catch(() => {
              this.btnLoading = false;
            });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.dataFormSave();
    },
    scopeFormat(data) {
      let scope = {};
      if (data) {
      }
      return scope;
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm));
      console.log("_data", _data);
      if (_data.scopeType == "1") {
        if (_data.scopeUsers) {
          _data.scopeUsers = _data.scopeUsers.join(",");
        }
      } else {
        _data.scopeUsers = undefined;
      }

      if (_data.startDatetimeTemp) {
        _data.startDatetime = _data.startDatetimeTemp[0];
        _data.endDatetime = _data.startDatetimeTemp[1];
      }
      return _data;
    },
    dataInfo(dataAll) {
      console.log("------------dataAll", dataAll);
      let _dataAll = dataAll;
      if (_dataAll.startDatetime && _dataAll.endDatetime) {
        this.$set(_dataAll, "startDatetimeTemp", [
          _dataAll.startDatetime,
          _dataAll.endDatetime,
        ]);
      }

      _dataAll.toDeptIds = _dataAll.scopeUsers
        ? _dataAll.scopeUsers.split(",")
        : [];
      console.log("------------_dataAll", _dataAll);
      this.dataForm = _dataAll;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__body {
  padding: 10px;
  flex: 1;
  overflow: auto;
}
.demo-drawer__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.demo-drawer__content form {
  height: calc(100% - 60px);
  overflow: auto;
  // flex: 1;
}
.demo-drawer__footer {
  height: 50px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  display: flex;
  align-items: center;
}
.demo-drawer__footer button {
  flex: 1;
}
</style>
